<template>
    <el-drawer
        v-model="isShow"
        title="任务详情"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <el-descriptions :column="1" :border="true">
            <el-descriptions-item v-for="item in detailColumn" :key="item.value" :label="item.label">
                <template v-if="item.value === 'state'">
                    <dict-tag :options="nj_recept_state" :value="detail?.[item.value]"/>
                </template>
                <template v-else>{{ detail?.[item.value] }}</template>
            </el-descriptions-item>
        </el-descriptions>

        <template #footer>
            <!-- 取消 -->
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>

    </el-drawer>
</template>

<script setup>
import {getTaskInfoByTaskId} from "@/api/FireAction/ExecuteFireAction.js";

const {proxy} = getCurrentInstance()
const {nj_recept_state} = proxy.useDict('nj_recept_state')
const isShow = ref(false)
// 详情内容
const detail = ref({})

const detailColumn = [
    {
        label: '任务名称',
        value: 'taskname'
    },
    {
        label: '任务下发人',
        value: 'addUserName'
    },
    {
        label: '任务接收人',
        value: 'receiveName'
    },
    {
        label: '任务下发时间',
        value: 'adddate'
    },
    {
        label: '任务内容',
        value: 'taskcontent'
    },
    {
        label: '接收时间',
        value: 'receivedate'
    },
    {
        label: '任务处理时间',
        value: 'handledate'
    },
    {
        label: '任务处理情况',
        value: 'treatment'
    },
    {
        label: '任务状态',
        value: 'state'
    }
]

// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
    if (!isShow.value) {
        detail.value = {}
    }
}

const showDetail = (taskId) => {
    changeShowStatus()
    getDetail(taskId)
}

defineExpose({showDetail})

// 获取详情内容
const getDetail = async (taskId) => {
    const res = await getTaskInfoByTaskId(taskId)
    detail.value = res.data
}
</script>

<style scoped lang="scss">

</style>